<template>
  <!-- 参考链接 https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3 -->
  <swiper class="swiper-main" :options="swiperOption">
    <!-- slides -->
    <swiper-slide class="swiper-item" v-for="item in swiperList" :key="item.id">
      <img :src="item.imgUrl" alt="" />
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  name: "Swiper",
  components: {
    swiper,
    swiperSlide,
  },
  props: {
    swiperList: Array,
  },
  data() {
    return {
      swiperOption: {
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.swiper-main {
  width: 100%;
  height: 4.4rem;

  img {
    width: 100%;
  }

  // .swiper-item{
  //   width: 100%;
  // }
}
</style>